<template>
    <div class="login_wrapper">
        <div>这是登录页面</div>
        <div>{{counter}}</div>
        <div>{{fullName}}</div>
        <div>{{textA}} -- {{textplus}}</div>
        <div>模块c的值{{textC}}</div>
        <button @click="updateNameFun">修改姓名为'jack'</button>
        <button @click="updatCountFun">Actions异步修改数据</button>
        <button @click="updatTextFun">更新模块里面的mutatons</button>
        <button @click="updatTextAdd">更新模块里面的actions</button>
        <button @click="changeCount">actions调用非模块的方法</button>
        <button @click="changTextFun">actions调用其他模块的方法</button>
        <div>
            <button @click="notify">点击创造通知</button>
            <input type="text" v-model="inputContent">
            <!-- <notification content="提示信息" /> -->
        </div>
        <!-- tabs页面 -->
        <tabs :value="tabValue" style="height:200px;" @change="handelChangeTab">
            <!-- $parent 和 provide -->
            <!-- <tab :label="item" :index="index+1" v-for="(item,index) in labOptions" :key="index">
                <!-- 如果里面有动态的值，则会改变，data与props没变化的，就不会重新渲染 -->
            <!-- <span>{{`${contentOptions[index].name}${inputContent}`}}</span> -->
            <!-- </tab> -->
            <tab label="tab1" index=1>
                <span>tab content 1 {{inputContent}}</span>
            </tab>
            <tab label="tab2" index=2>
                <span slot="label" style="color:red;">tab2</span>
                <span>tab content 2</span>
            </tab>
            <tab label="tab3" index=3>
                <span>tab content 3</span>
            </tab>
        </tabs>
    </div>
</template>

<script>
import { strlen } from '@/assets/until/tools.js'
// 写法优化
import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
} from 'vuex'
export default {
    components: {},
    props: {},
    data () {
        return {
            tabValue: 1,
            inputContent: '',
            inputContent2: '10',
            MaxLength: 30,
            labOptions: [
                '纨绔', '上古', '茶昕333'
            ],
            contentOptions: [
                {
                    name: '容景-----',
                    type: 20
                },
                {
                    name: '白炔真神-----',
                    type: 10
                },
                {
                    name: '墨月商洛-----',
                    type: 10
                },
            ]
        }
    },
    watch: {
        // inputContent(newValue) {
            // this.$set(this.inputContent2,newValue)
            // this.inputContent2 = newValue
        // }
    },
    computed: {
        // 使用mapState之后获取count ,如果computed解析不了这个，则安装 babel-preset-stage-1,没有定稿的语法都可以使用
        // ...mapState(['count']), // 同名的写法
        // 不同名的写法
        //   ...mapState({
        //       counter:'count'
        //   }),
        // 如果用来计算，可以优化成：多个计算属性的写法
        ...mapState({
            counter: (state) => `${state.count}px `,
            textA: (state) => state.a.text,
            textC: (state) => state.c.modelecText
        }),

        // 没使用mapsState
        // count () {
        //     return this.$store.state.count
        // },
        // ...mapGetters(['fullName','a/textplus'])
        // fullName () {
        //     return this.$store.getters.fullName
        // }
        // 计算属性this['a/textpuls'],不好调用的值，一般改成下面的写法
        ...mapGetters({
            fullName: 'fullName',
            textplus: 'a/textplus'
        })
    },
    methods: {
        AddFun () {
            if (strlen(this.inputContent) < 4) {
                console.log('请输入4到30个字符')
                return false
            }
            if (strlen(this.inputContent) > 30) {
                this.MaxLength = 30
                console.log('请输入4到30个字符')
                return false
            }
        },
        // 每次切换更换index
        handelChangeTab (value) {
            this.tabValue = value
        },
        //   mapActions,mapMutations对应的是操作应该放在方法里面
        ...mapActions(['updateCountASync', 'a/add', 'a/changeCount', 'b/textAction']),
        ...mapMutations(['updateName', 'updateCount', 'a/updateText']),

        // 更新getters里面的值，其实就是统一修改state里面的字
        updateNameFun () {
            // this.$store.commit('updateName', 'jack')
            // 使用mapMutations
            this.updateName('jack')
        },
        updatCountFun () {
            // this.$store.dispatch('updateCountASync', { num: 5, time: 2000 })
            // 使用mapActions,方法名不需要写，直接传参数，其实就是一一对应的关系
            this.updateCountASync({ num: 5, time: 2000 })

        },
        updatTextFun () {
            // 设置模块属性之后的调用的方法，a模块里面的updateText的方法，传入的值为123
            this['a/updateText'](123)
        },
        updatTextAdd () {
            // 这里是函数调用的方法
            this['a/add']()
        },
        changeCount () {
            this['a/changeCount']()
        },
        changTextFun () {
            this['b/textAction']()
        },
        notify () {
            this.$notify({
                content: '这是通知组件',
                btn: 'close'
            })
        }
    },
    created () { },
    mounted () {
        // console.log(this.$store.state.count)
        this.updatTextFun(5666)
        let i = 1
        // 修改count，传多个数据，包装成对象
        // this.$store.commit('updateCount', {
        //     num:30,
        //     num2:40
        // })
        // this.$store.state.count = 7
        // setInterval(() => {
        //     this.updateCount({num:i++,num2:2})
        // }, 1000)

    }
}
</script>